<template>
	<view v-if="pageShow">
		<view class="" style="padding-bottom: 180rpx;">
			<!-- 赛事名称 -->
			<view class="mainpadding ffffff">
				<view class="flexbetween">
					<view class="shilitu">
						<image :src="dataAll.ssinfo.image_text" mode=""></image>
					</view>
					<view class="" style="width: 69%;">
						<view class="titletext xiaohei fonweight yhxk">{{dataAll.ssinfo.name}}</view>
						<view class="strongtext xiaohui nofonweight margin_right2 margin_top1">开始时间：{{dataAll.ssinfo.bm_starttime_text}}</view>
						<view class="strongtext xiaohui nofonweight margin_right2 margin_top1">截至时间：{{dataAll.ssinfo.bm_endtime_text}}</view>
						<view class="strongtext xiaohui nofonweight margin_right2 margin_top1 yhxk">{{dataAll.ssinfo.cityinfo}}{{dataAll.ssinfo.address}}</view>
					</view>
				</view>
			</view>
			<!-- 报名人数 -->
			<!-- <view class="mainpadding ffffff margin_top1">
				<view class="sanshis xiaohei fonweight">报名人数</view>
				<view class="margin_top xiahuaxian flexbetween">
					<view class="ershiba xiaohei nofonweight ">男</view>
					<view class="flexright">
						<view class="jianbox margin_right2">-</view>
						<input class="input textcenter margin_right2" type="text">
						<view class="jiabox ">+</view>
					</view>
				</view>
				<view class="margin_top flexbetween">
					<view class="ershiba xiaohei nofonweight ">女</view>
					<view class="flexright">
						<view class="jianbox margin_right2">-</view>
						<input class="input textcenter margin_right2" type="text">
						<view class="jiabox ">+</view>
					</view>
				</view>
			</view> -->
			<!-- 报名信息 -->
			<view class="ffffff mainpadding margin_top1" v-if="dataAll.ssinfo.type==2" @click="jumpxz()">
				<view class="flexbetween">
					<view class="ershiba xiaohei nofonweight ">团队：</view>
					<view class="flexright">
						<input class="textright" type="text" disabled="" placeholder="请选择团队" v-model="user_zbfapply_listname">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="ffffff mainpadding margin_top1">
				<view class="sanshis xiaohei fonweight">报名信息</view>
				<view class="flexbetween xiahuaxian margin_top">
					<view class="ershiba xiaohei nofonweight ">姓名：</view>
					<input class="textright" type="text" placeholder="请输入姓名" v-model="username">
				</view>
				<view class="flexbetween xiahuaxian margin_top">
					<view class="ershiba xiaohei nofonweight ">手机号：</view>
					<input class="textright" type="number" placeholder="请输入手机号" v-model="mobile">
				</view>
				<view class="flexbetween margin_top">
					<view class="ershiba xiaohei nofonweight ">身份证号：</view>
					<input class="textright" type="text" placeholder="请输入身份证号" v-model="idcard">
				</view>
			</view>
			<!-- 优惠 -->
			<view class="mainpadding ffffff margin_top1" v-if="dataAll.coupon_list.length">
				<view class="sanshier xiaohei fonweight">优惠</view>
				<view class="flexbetween margin_top" @click="yhqShow=true">
					<view class="ershiba xiaohui nofonweight">优惠券</view>
					<view class="flexright">
						<view class="ershiba xiaohui nofonweight">{{coupon_name?coupon_name:'选择优惠券'}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="ffffff mainpadding margin_top1" v-if="dataAll.ssinfo.type==2">
				<view class="sanshis xiaohei fonweight">参赛人</view>
				<view class="flexbetween margin_top" @click="jumpurl('/pages_mypage/wodetd?type=1&ids=',JSON.stringify(join_user_data))">
					<view class="ershiba xiaohei nofonweight ">参赛人</view>
					<view class="flexright">
						<view class="ershiba xiaohui nofonweight ">{{join_user_data.length==0?'选择参赛人':"已选"+join_user_data.length+"人，男"+boynum+"人，女"+girlnum+"人"}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="ershiba xiaohei nofonweight margin_top">参赛团队人数:{{dataAll.ssinfo.team_num}}人</view>
				<view class="ershiba xiaohei nofonweight margin_top" v-if="dataAll.ssinfo.man_num">男生人数:{{dataAll.ssinfo.man_num}}人</view>
				<view class="ershiba xiaohei nofonweight margin_top" v-if="dataAll.ssinfo.womam_num">女生人数:{{dataAll.ssinfo.womam_num}}人</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<!-- <view class="gudingdb mainpadding ffffff">
			<view class="bigbtn" @click="tzbmxx">提交信息</view>
		</view> -->
		<view class="gudingdb mainpadding ffffff">
			<view class=" flexbetween">
				<view class="">
					<view class="xiaohong ershiba fonweight">需支付：￥{{dataAll.pay_info.pay_price}}</view>
					<view class="xiaohuang strongtext nofonweight margin_top1">（优惠券抵扣{{dataAll.pay_info.coupon_price}}元）</view>
				</view>
				
				<view class="xiaobtnty" @click="tzbmxx">提交报名</view>
			</view>
		</view>
		<u-popup :show="yhqShow" @close="yhqShow=false">
			<view class="mainpadding_top fonweight flexcenter">优惠券</view>
			<view class="mainpadding" style="background-color: #f9f9f9;">
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class=" margin_top" v-for="item in dataAll.coupon_list" :key="item.id" @click="selectrole(item)">
						<view class="flexleft yxzbox" v-show="item.id==coupon_id">
							<view class="nerbox youbk">
								<view class="smalltext xiaobai nofonweight">￥
									<text class="bigtext xiaobai fonweight">{{item.price}}</text>
								</view>
								<view class="strongtext xiaobai nofonweight margin_top1">
									{{Number(item.mj_price)==0?"无使用门槛":"满"+item.mj_price}}
								</view>
							</view>
							<view class="nerbox">
								<view class="sanshier xiaobai nofonweight">{{item.name}}</view>
								<view class="strongtext xiaobai nofonweight margin_top1">有效截止日期：{{item.end_time_text}}</view>
							</view>
						</view>
						<view class="flexleft wexbxo" v-if="item.id!=coupon_id">
							<view class="nerbox youbk">
								<view class="smalltext xiaolv nofonweight">￥
									<text class="bigtext xiaolv fonweight">{{item.price}}</text>
								</view>
								<view class="strongtext xiaohei nofonweight margin_top1">
									{{Number(item.mj_price)==0?"无使用门槛":"满"+item.mj_price}}
								</view>
							</view>
							<view class="nerbox">
								<view class="sanshier xiaohei nofonweight">{{item.name}}</view>
								<view class="strongtext xiaohei nofonweight margin_top1">有效截止日期：{{item.end_time_text}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				listid: "",
				coupon_id: "",
				yhqShow: false,
				coupon_name: "",
				dataAll: {},
				join_user_data: [],
				username: "",
				mobile: "",
				idcard: "",
				pageShow:false,
				girlnum:0,
				boynum:0,
				user_zbfapply_listid:"",
				user_zbfapply_listname:""
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
		},
		onShow() {
			uni.$off("checkry")
			uni.$on("checkry", data => {
				this.join_user_data = data
			})
			uni.$off("checksf")
			uni.$on("checksf",data=>{
				this.user_zbfapply_listid = data.id
				this.user_zbfapply_listname = data.name
			})
		},
		watch:{
			
			join_user_data(newval){
				console.log(newval,8989);
				let girl = 0
				let boy = 0
				newval.forEach(item=>{
					if(item.grande==0){
						boy = boy + 1
					}else{
						girl = girl + 1
					}
				})
				this.girlnum = girl
				this.boynum = boy
			}
		},
		methods: {
			jumpxz(){
				uni.navigateTo({
					url:"/pages_mypage/wodehz?type=3"
				})
			},
			selectrole(item){
				this.coupon_id = item.id
				this.coupon_name = item.name
				this.getDetail()
			},
			getDetail() {
				httpRequest.request('/api/Activitycl/activitySure', 'POST', {
					activity_id: this.listid,
					coupon_id: this.coupon_id,
				}, false, false, true).then(res => {
					if(res.code==1){
						this.dataAll = res.data
						this.pageShow = true
					}else{
						httpRequest.toast(res.msg)
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			// 跳转提交报名
			tzbmxx() {
				if(this.dataAll.ssinfo.type==2){
					if(this.user_zbfapply_listid==""){
						httpRequest.toast("请选择团队")
						return false
					}
				}
				if(this.username==""){
					httpRequest.toast("请输入姓名")
					return false
				}
				if(this.mobile==""){
					httpRequest.toast("请输入电话")
					return false
				}
				if(this.idcard==""){
					httpRequest.toast("请输入身份证号")
					return false
				}
				if(this.dataAll.ssinfo.type==2){
					if(this.join_user_data.length==0){
						httpRequest.toast("请选择参赛人")
						return false
					}
					if(this.dataAll.ssinfo.man_num){
						if(this.boynum != this.dataAll.ssinfo.man_num){
							httpRequest.toast("当前比赛规定男性参加人数为"+this.dataAll.ssinfo.man_num+"人")
							return false
						}
					}
					if(this.dataAll.ssinfo.womam_num){
						if(this.girlnum != this.dataAll.ssinfo.womam_num){
							httpRequest.toast("当前比赛规定女性参加人数为"+this.dataAll.ssinfo.womam_num+"人")
							return false
						}
					}
					if(this.dataAll.ssinfo.team_num != this.join_user_data.length){
						httpRequest.toast("当前比赛规定团队参加人数为"+this.dataAll.ssinfo.team_num+"人")
						return false
					}
				}
				let join_user_data = []
				this.join_user_data.forEach(item=>{
					join_user_data.push(item.id)
				})
				httpRequest.request('/api/Activitycl/addActivityOrder', 'POST', {
					activity_id: this.listid,
					coupon_id:this.coupon_id,
					username:this.username,
					mobile:this.mobile,
					idcard:this.idcard,
					join_user_data:join_user_data.join(),
					user_zbfapply_id:this.user_zbfapply_listid
				}, false, false, true).then(res => {
					if(res.code==1){
						uni.redirectTo({
							url: '/pages_homepage/zhifu?type=2&id='+res.data.id+"&price="+res.data.pay_price
						})
					}else{
						httpRequest.toast(res.msg)
					}
				})
				
			},
			// 跳转提交报名
			// tzbmxx() {
			// 	uni.navigateTo({
			// 		url: '/pages_julebu/huodongbmxx'
			// 	})
			// },
			jumpurl(url,id){
				if(this.user_zbfapply_listid==""){
					httpRequest.toast("请选择团队")
					return false
				}
				uni.navigateTo({
					url:url+id+"&user_zbfapply_listid="+this.user_zbfapply_listid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toumd {
		opacity: 0.5;
	}
	
	.xiahuaxian1 {
		border-bottom: 1rpx solid #F5F5F5;
	}
	
	.nerbox {
		padding: 38rpx 31rpx;
	}
	
	.wexbxo {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	
	.youbk {
		border-right: 2rpx solid #F5F5F5;
	}
	
	.yxzbox {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.input {
		width: 120rpx;
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #AAAAAA;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	page {
		background-color: #F9F9F9;
	}
</style>